<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta name="title" th:content="'产品_'+${title}" />
		<meta name="description" th:content="${description}" />
		<meta name="keywords" th:content="${keywords}" />
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>产品</title>
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/index.css">
		<link rel="stylesheet" href="../css/type.css">
		<script src="../js/jquery.min.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/grabber.js"></script>
		<style>
			@media screen and (max-width: 768px){
				.container{
					width: calc(100%) !important;
					max-width: calc(100%);
					padding: 0 15px;
					box-sizing: border-box;
				}
			}
		</style>
	</head>
	<body>
		<div>
			<div class="header-page"></div>		
			<div class="swiper-shop swiper-container">
				<div class="swiper-wrapper">
					<div th:each="banner :${banners}" class="swiper-slide" th:id="${banner.images}"
						 th:style="'background:url(' + ${banner.images} + ');'"
					></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<div class="container" style="margin-top: 30px;">
				<ol class="breadcrumbs">
					<li>
						<a href="../index.html">
							<span>首页</span>
						</a>
						&gt;
					</li>
					<li>
						<a href="">
							<span th:text="${catagroy1}" property="name">一级分类</span>
						</a>
						&gt;
					</li>
					<li>
						<span class="last" th:text="${catagroy2}">当前分类名称</span>
					</li>
				</ol>
				<div class="vertical-menu">
					<div class="filter-bar">
						<div id="floating-bar-header-container">
							<div id="filter-bar-heading" class="filter-bar-heading">
								<h1 class="concept" th:text="${catagroy2}">当前分类名称</h1>
								<div class="concept-counters">
									<span class="bold" th:text="${#lists.size(shops)}">0</span>
									企业
									| <span class="bold" th:text="${products.size()}">0</span>
									产品
								</div>
							</div>
						</div>
					</div>
					<div id="result-list" class="result-list">
						<div id="float-bar-container">
							<div id="floatbar-placeholder">
								<form>
									<ul>
										<li class="dropdown">
											<div class="dropdown-toggle feature-selected">
												<h2>企业名称</h2>
												<i class="fa fa-angle-up"></i>
											</div>
											<div class="dropdown-menu contentScrollBar" style="display: block;">
												<ul id="itemList">
													<li class="empty-line"></li>
													<li class="autocomplete_item" th:each="shop: ${shops}">
														<label th:text="${shop.name}" th:onclick="getList(1,${shop.id})">Airmar</label>
													</li>
												</ul>
											</div>
										</li>
										<li class="dropdown">
											<div class="dropdown-toggle feature-selected">
												<h2>分类名称</h2>
												<i class="fa fa-angle-up"></i>
											</div>
											<div class="dropdown-menu contentScrollBar" style="display: block;">
												<ul id="itemList">
<!--													<li class="first-letter">A</li>-->
<!--													<li class="empty-line"></li>-->
<!--													<li class="autocomplete_item">-->
<!--														<label title="Airmar Technology&nbsp;(2)">-->
<!--															Airmar Technology&nbsp;-->
<!--															<span class="nbproduct">(2)</span>-->
<!--														</label>-->
<!--													</li>-->
<!--													<li class="empty-line"></li>-->

<!--													<li class="first-letter">B</li>-->
<!--													<li class="empty-line"></li>-->
<!--													<li class="autocomplete_item">-->
<!--														<label title="Badger Meter&nbsp;(6)">-->
<!--															Badger Meter&nbsp;-->
<!--															<span class="nbproduct">(6)</span>-->
<!--														</label>-->
<!--													</li>-->
<!--													<li class="empty-line"></li>-->

													<li class="autocomplete_item" th:each="catagory3 :${catagory3}">
														<label th:text="${catagory3.label}" th:onclick="getList(2,${catagory3.id})">
															Airmar
														</label>
													</li>
												</ul>
											</div>
										</li>
										<li class="dropdown">
											<div class="dropdown-toggle">
												<h2>标签</h2>
												<i class="fa fa-angle-up"></i>
											</div>
											<div class="dropdown-menu contentScrollBar" style="display: block;">
												<ul class="dropdown-parent">
													<li class="clearfix" th:each="catagoryLable:${catagoryLables}">
														<label class="label left" title="turbine&nbsp;(1)">
															<span th:text="${catagoryLable.label}" th:onclick="getList(3,${catagoryLable.label})">turbine</span>
															<!-- <span class="nbproduct">(1)</span> -->
														</label>
													</li>
												</ul>
											</div>
										</li>
										<!-- <div class="btn-filters">确定</div> -->
									</ul>
								</form>
							</div>
						</div>
						<div class="row result-tab-flex">
							<!-- 循环体 -->
							<div class="col-lg-fifth col-md-3 col-sm-6 col-xs-6 product-tile" th:each="product :${products}">
								<div class="inset add-grabber-button clearfix" th:onclick="goDetail([[${product.id}]])">
									<div class="inset-img">
										<img alt="turbine flow sensor" th:src="${product.images}">
									</div>
									<div class="inset-caption price-container">
										<a th:href="@{'detail/'+${product.id}+'.html'}" class="logo">
											<img th:src="${product.shopLogo}">
											<span>中国</span>
										</a>
										<a th:href="@{'detail/'+${product.id}+'.html'}" class="shop-name" th:text="${product.shopName}">
											店铺名称
										</a>
										<a th:href="@{'detail/'+${product.id}+'.html'}">
											<h3 class="short-name" th:text="${product.productName}">产品名</h3>
											<div class="feature-values-container">
												<span th:each="plable: ${#strings.listSplit(product.productLable,',')}" th:text="${plable}">标签一</span>
											</div>
										</a>
									</div>
									<div class="grabber-btn" th:onclick="addGrabber(event,${product})">
										<span>添加到产品对比表</span>
									</div>
								</div>
							</div>
							<!-- 循环结束 -->
						</div>
					</div>
				</div>
			</div>
			<div id="grabber" class="grabber">
				<div id="grabberActions" class="grabberActions" onclick="showGrabber()">
					<div id="grabberCounter" class="grabberCounter"><span>1</span>/10对比产品</div>
					<div id="grabberCompareBtn" onclick="goGrabber(event)" class="grabberCompareBtn grabberBtn btn btn-mcl">
						对比
					</div>
					<div id="grabberEmptyBtn" onclick="emptyGrabber(event)" class="grabberEmptyBtn grabberBtn btn">
						清空对比产品
					</div>
				</div>
				<div id="grabberProductDetails" class="grabberProductDetails">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide grabberMoreProducts">
								对比多达10种产品
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer-page"></div>
			<div class="login-cli"></div>
		</div>
		<script>
			$(function() {
				$(".header-page").load("http://122.14.195.113:8089/header.html");
				$(".footer-page").load("http://122.14.195.113:8089/footer.html");
				$(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
			});
			let url = window.location.href
			let urlList = url.split('/')
			let html = urlList[urlList.length - 1]
			let catagory2 = html.replace('.html','')
			function goDetail(id) {
				window.location.href = '../productdetail/'+id+'.html'
			}
			var swiper = new Swiper('.swiper-shop', {
				spaceBetween: 0,
				loop: true,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				observer: true,
				observeParents: true,
				watchOverflow: true
			});
			function getList(type,name){
				// type 1：企业，2：分类，3：标签
				let obj = {}
				if(type == 1){
					obj = {
						shopId: name,
						catagory2:catagory2
					}
				}else if(type == 2){
					obj = {
						catagoryId: name
					}
				}else if(type == 3){
					obj = {
						productLable: name,
						catagory2:catagory2
					}
				}
				$('.result-tab-flex').html('')
				$.ajax({
					url: baseUrl + '/car-admin/search/product/index',
					type: 'get', //提交方法是POST
					data: obj, //以JSON字符串形式把 user 传到后台
					dataType: 'json', //后台返回的数据类型是json文本
					success: function(result) { //请求成功的回调方法
						if (result != "" && result.code == 0) {
							result.data.forEach(item=>{
								item.productLable = JSON.parse(item.productLable)
								let html = `<div class="col-lg-fifth col-md-3 col-sm-6 col-xs-6 product-tile">
									<div class="inset add-grabber-button clearfix" onclick="goDetail(${item.id})">
										<div class="inset-img">
											<img alt="turbine flow sensor" src="${item.images}">
										</div>
										<div class="inset-caption price-container">
											<a href="${'detail/'+item.id+'.html'}"  class="logo">
												<img src="${item.shopLogo}">
												<span>中国</span>
											</a>
											<a href="${'detail/'+item.id+'.html'}" class="shop-name">
												${item.shopName}
											</a>
											<a href="${'detail/'+item.id+'.html'}">
												<h3 class="short-name">${item.productName}</h3>
												<div class="feature-values-container">`
											item.productLable.forEach(tag=>{
												html += `<span>${plable}</span>`
											})
										html +=`</div>
											</a>
										</div>
										<div class="grabber-btn" onclick="addGrabber(event,${item})">
											<span>添加到产品对比表</span>
										</div>
									</div>
								</div>`
								$('.result-tab-flex').append(html)
							})
						}
					}
				});
			}
		</script>
	</body>
</html>
